@extends('app')

@section('content')
<div class="layui-card" style="margin-bottom: 0;">
    @include('layouts.breadcrumb')

    <div class="layui-tab-content">
        <form class="layui-form">
            <blockquote class="layui-elem-quote quoteBox" >
                <div class="layui-inline">
                    <div class="layui-input-inline">
                        <select name="role_id">
                            <option value="">请选择角色</option>
{{--                            @foreach($role as $item)--}}
{{--                                <option value="{{$item->id}}">{{$item->name}}</option>--}}
{{--                            @endforeach--}}
                        </select>
                    </div>
                </div>
                <a class="layui-btn search_btn" data-type="reload" lay-submit lay-filter="search" style="margin-left: 3px"><i class="layui-icon layui-icon-search"></i>查询</a>
            </blockquote>
        </form>
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="model" lay-filter="model"></table>
        </div>
    </div>
</div>

{{--表头操作--}}
<script type="text/html" id="upload">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="edit">添加账号</button>
    </div>
</script>

{{--表列操作--}}
<script type="text/html" id="operate">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="reset">修改密码</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
@endsection

@section('js')
<script>
    layui.use('table', function(){
        var table = layui.table;
        var form = layui.form;

        table.render({
            elem: '#model',
            url:'/admin/index',
            cellMinWidth: 95, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            height: 'full-150',
            method : 'POST',
            page: true, //开启分页
            defaultToolbar: ['filter', 'print', 'exports'],
            toolbar:'#upload',
            limit:20,
            loading:true,
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'index', title: '序号',align:'center', fixed: 'left',width:40, type: 'numbers'},
                {field:'nickname',title: '昵称'},
                {field:'username',title: '登录账户'},
                {field:'email',title: '电子邮箱'},
                {field:'created_at',title: '创建时间',templet:function(item){return dateTime(item.created_at)}},
                {field:'updated_at',title: '更新时间',templet:function(item){return dateTime(item.updated_at)}},
                {title: '操作',width:200, align:'center', fixed: 'right', toolbar: '#operate'}
            ]]
        });

        //表头操作
        table.on('toolbar(model)', function(obj){
            switch(obj.event){
                case 'edit':
                    newWindow('添加账号', '/admin/edit','500','450');
                    break;
            };
        });

        //列操作
        table.on('tool(model)',function (obj) {
            if(obj.event === 'del'){//删除行
                del(obj);
            }else if(obj.event==="reset"){
                var data = obj.data;
                newWindow('修改密码','/admin/reset?id='+data.id,500,230);
            }else if(obj.event==="edit"){
                var data = obj.data;
                newWindow('编辑账号','/admin/edit?id='+data.id,500,350);
            }
        });
    })
</script>
@endsection
